/*
 * 合作伙伴信息修改
 * @Author: ljb 
 * @Date: 2017-11-27 15:24:41 
 * @Last Modified by: ljb
 * @Last Modified time: 2018-01-30 10:27:17
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .ivu-form-item-content {
        img {
            width: 150px;
        }
    }

</style>
<template>
<div class="v-admin-partner-edit">
    <Form ref="formValidate" :model="formValidate" :label-width="80">

        <Form-item label="名称" prop="name">
            <Input v-model="formValidate.name" placeholder="请输入名称"></Input>
        </Form-item>

        <!-- <Form-item label="官网地址" prop="url">
            <Input v-model="formValidate.url" type="url" placeholder="请输入官网地址"></Input>
        </Form-item> -->

        <Form-item label="优先级" prop="priority">
            <InputNumber :max="100" :min="1" v-model="formValidate.priority" placeholder="优先级"></InputNumber>
        </Form-item>

        <Form-item label="logo" prop="logo">
            <Upload :before-upload="file=>fileChange(file,'logo','image_info')"
                    :on-remove="file=>fileChange(file,'logo','image_info')"
                    :multiple="false"
                    accept="image/jpg, image/jpeg, image/png"
                    action="//fake_upload_url/">
                <Button type="ghost" icon="ios-cloud-upload-outline">上传图片</Button>
                <div class="license-tip" slot="tip" v-if="image_info.name">{{ image_info.name }}</div>
            </Upload>
            <img v-if="image_info.url" :src="image_info.url" alt="合作伙伴logo">
        </Form-item>

        <Form-item label="备注" prop="remark">
            <Input v-model="formValidate.remark" type="textarea" :autosize="{minRows: 4,maxRows: 5}" placeholder="请输入备注"></Input>
        </Form-item>    
        
        <Form-item>
            <Button type="primary" @click="handleSubmit('formValidate')">更新信息</Button>
        </Form-item>

    </Form>
</div>
</template>

<script>
export default {

    name: 'partner-edit',

    props: ['partnerDetail'],

    data() {	

        return {

            formValidate : {

                _method : 'PUT',

                name : '',

                // url : '',

                logo : '',

                priority : 1,

                remark : ''

            },                  //编辑信息时的表单

            // 上传的图片信息
            image_info : {

                name: '',

                // url: ''         //这个地方可以 base64 编码的图片，然后给 modal 框去显示图片
            },

            // ruleValidate : {

            //     url : [

            //         { type: 'url', message: '网址格式错误', trigger: 'blur,change' },

            //     ]

            // }

        }
    },
    watch: {
        'partnerDetail' : function(){

            if( this.partnerDetail ) {

                this.formValidate.name = this.partnerDetail.name;

                this.formValidate.url = this.partnerDetail.url;

                this.formValidate.logo = this.partnerDetail.logo;

                this.formValidate.priority = this.partnerDetail.priority;

                this.formValidate.remark = this.partnerDetail.remark;

                this.image_info.url = this.partnerDetail.logo;

            }

        }  
    },
    methods: {

        /**
         * file类型input改变
         * @param  {Object} file {选择的文件对象}
         * @return {Boolean} {false则会停止上传}
         */
        fileChange(file,param,info){

            this[info].name = file.name;

            // this[info].url = '';

            this.formValidate[param] = file;

            return false;

        },

        /**
         * 重置合作伙伴信息
         * @return {undefined}
         */
        resetPartnerInfo(){

            this.image_info.name = '';

            // this.image_info.url = '';

        },

         /**
         * 提交表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
        handleSubmit (name) {

            this.$refs[name].validate((valid) => {

                if (valid) {

                    this.resetPartnerInfo();

                    this.$emit('update',this.partnerDetail.id,this.formDataCreate());

                } else {

                    this.$Message.error('不符合提交规则!');

                }
            })
        },

        /**
         * 手动拼接formdata数据
         * @return {Object}
         */
        formDataCreate(){

            const new_object = {

                _method : 'PUT',

                name : this.formValidate.name,

                // url : this.formValidate.url,

                logo : this.formValidate.logo,

                priority : this.formValidate.priority,

                remark : this.formValidate.remark

            };

            let form_data = new FormData();

            Object.keys(new_object).forEach((key)=>{

                form_data.append( key , new_object[key] );
        
            });

            return form_data;

        }
        
    }
}
</script>